<template>
  <div class="vue-styles-demo">
    <h2 class="section-title">Vue 样式系统详解</h2>
    <p class="section-intro">
      Vue 提供了强大的样式系统，包括 scoped 样式、深度选择器、CSS Modules
      等特性，帮助开发者更好地管理组件样式。
    </p>

    <div class="demo-grid">
      <!-- Scoped 样式 -->
      <div class="demo-card">
        <h3>Scoped 样式原理</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;!-- 组件模板 --&gt;
&lt;template&gt;
  &lt;div class="container"&gt;
    &lt;h1 class="title"&gt;标题&lt;/h1&gt;
    &lt;p class="content"&gt;内容&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;!-- Scoped 样式 --&gt;
&lt;style scoped&gt;
.container {
  padding: 20px;
  background: #f5f5f5;
}

.title {
  color: #333;
  font-size: 24px;
}

.content {
  color: #666;
  line-height: 1.6;
}
&lt;/style&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="scoped-explanation">
              <h4>编译后的结果：</h4>
              <div class="compiled-code">
                <pre><code>&lt;!-- HTML --&gt;
&lt;div class="container" data-v-7ba5bd90&gt;
  &lt;h1 class="title" data-v-7ba5bd90&gt;标题&lt;/h1&gt;
  &lt;p class="content" data-v-7ba5bd90&gt;内容&lt;/p&gt;
&lt;/div&gt;

&lt;!-- CSS --&gt;
.container[data-v-7ba5bd90] {
  padding: 20px;
  background: #f5f5f5;
}

.title[data-v-7ba5bd90] {
  color: #333;
  font-size: 24px;
}

.content[data-v-7ba5bd90] {
  color: #666;
  line-height: 1.6;
}</code></pre>
              </div>
              <div class="scoped-demo-box">
                <h4>Scoped 样式演示</h4>
                <p>这个盒子的样式是 scoped 的，不会影响其他组件</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 深度选择器 -->
      <div class="demo-card">
        <h3>深度选择器 (:deep)</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;!-- 父组件 --&gt;
&lt;template&gt;
  &lt;div class="parent"&gt;
    &lt;ChildComponent /&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style scoped&gt;
/* 普通 scoped 样式，无法影响子组件 */
.child-title {
  color: red; /* 不会生效 */
}

/* 使用深度选择器，可以影响子组件 */
:deep(.child-title) {
  color: blue; /* 会生效 */
}

/* Vue 2 语法（已废弃） */
/deep/ .child-title { color: green; }
::v-deep .child-title { color: green; }

/* 组合使用 */
.parent :deep(.child-content) {
  font-size: 16px;
}
&lt;/style&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="deep-selector-demo">
              <div class="parent-component">
                <h4>父组件</h4>
                <div class="child-simulation">
                  <h5 class="child-title">子组件标题 (被深度选择器影响)</h5>
                  <p class="child-content">子组件内容 (被深度选择器影响)</p>
                  <div class="nested-child">
                    <span class="nested-text">嵌套子组件文本</span>
                  </div>
                </div>
              </div>
              <div class="deep-explanation">
                <h4>深度选择器编译结果：</h4>
                <pre><code>/* 编译前 */
:deep(.child-title) { color: blue; }

/* 编译后 */
[data-v-7ba5bd90] .child-title { color: blue; }</code></pre>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 插槽选择器 -->
      <div class="demo-card">
        <h3>插槽选择器 (:slotted)</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;!-- 子组件 (接收插槽) --&gt;
&lt;template&gt;
  &lt;div class="wrapper"&gt;
    &lt;slot&gt;&lt;/slot&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style scoped&gt;
/* 普通样式无法影响插槽内容 */
.slot-content {
  color: red; /* 不会生效 */
}

/* 使用插槽选择器 */
:slotted(.slot-content) {
  color: blue;
  font-weight: bold;
}

/* 更具体的插槽选择器 */
:slotted(h3) {
  margin-top: 0;
}

:slotted(.highlight) {
  background: yellow;
  padding: 4px 8px;
}
&lt;/style&gt;

&lt;!-- 父组件 (提供插槽内容) --&gt;
&lt;template&gt;
  &lt;ChildComponent&gt;
    &lt;h3&gt;插槽标题&lt;/h3&gt;
    &lt;p class="slot-content"&gt;插槽内容&lt;/p&gt;
    &lt;span class="highlight"&gt;高亮文本&lt;/span&gt;
  &lt;/ChildComponent&gt;
&lt;/template&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="slotted-demo">
              <div class="slot-wrapper">
                <h4>模拟插槽组件</h4>
                <div class="slot-content-area">
                  <h5 class="slot-title">插槽标题 (被 :slotted 影响)</h5>
                  <p class="slot-content">插槽内容 (被 :slotted 影响)</p>
                  <span class="slot-highlight">高亮文本 (被 :slotted 影响)</span>
                </div>
              </div>
              <div class="slotted-explanation">
                <h4>插槽选择器编译结果：</h4>
                <pre><code>/* 编译前 */
:slotted(.slot-content) { color: blue; }

/* 编译后 */
.slot-content[data-v-parent-hash] { color: blue; }</code></pre>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 全局选择器 -->
      <div class="demo-card">
        <h3>全局选择器 (:global)</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;style scoped&gt;
/* 局部样式 */
.local-class {
  color: blue;
}

/* 全局样式 */
:global(.global-class) {
  color: red;
  font-weight: bold;
}

/* 混合使用 */
.local-wrapper :global(.global-content) {
  padding: 10px;
  background: #f0f0f0;
}

/* 全局重置某些样式 */
:global(body) {
  margin: 0;
  padding: 0;
}

/* 全局覆盖第三方组件样式 */
:global(.el-button) {
  border-radius: 4px;
}
&lt;/style&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="global-demo">
              <div class="local-wrapper">
                <div class="local-class">局部样式文本</div>
                <div class="global-class">全局样式文本</div>
                <div class="global-content">混合样式内容</div>
              </div>
              <div class="global-explanation">
                <h4>全局选择器编译结果：</h4>
                <pre><code>/* 编译前 */
:global(.global-class) { color: red; }

/* 编译后 */
.global-class { color: red; }</code></pre>
                <p class="note"><strong>注意：</strong> 全局样式会影响整个应用，使用时要谨慎。</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- CSS Modules -->
      <div class="demo-card">
        <h3>CSS Modules</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;!-- 组件模板 --&gt;
&lt;template&gt;
  &lt;div :class="$style.container"&gt;
    &lt;h1 :class="$style.title"&gt;CSS Modules 标题&lt;/h1&gt;
    &lt;p :class="[$style.content, $style.highlight]"&gt;
      多个类名组合
    &lt;/p&gt;
    &lt;button :class="$style.button" @click="toggleTheme"&gt;
      切换主题
    &lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref } from 'vue'

const isDark = ref(false)

const toggleTheme = () =&gt; {
  isDark.value = !isDark.value
}
&lt;/script&gt;

&lt;!-- CSS Modules 样式 --&gt;
&lt;style module&gt;
.container {
  padding: 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.title {
  font-size: 24px;
  margin-bottom: 16px;
}

.content {
  line-height: 1.6;
  margin-bottom: 16px;
}

.highlight {
  background: yellow;
  padding: 4px 8px;
}

.button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #007bff;
  color: white;
}

.button:hover {
  background: #0056b3;
}
&lt;/style&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="css-modules-demo">
              <div :class="$style.container">
                <h4 :class="$style.title">CSS Modules 演示</h4>
                <p :class="[$style.content, $style.highlight]">
                  这是使用 CSS Modules 的内容，类名会被自动哈希化
                </p>
                <button :class="$style.button" @click="toggleModulesDemo">
                  {{ modulesActive ? '重置' : '激活' }}
                </button>
              </div>
              <div class="modules-explanation">
                <h4>CSS Modules 特点：</h4>
                <ul>
                  <li>类名自动哈希化，避免冲突</li>
                  <li>通过 $style 对象访问类名</li>
                  <li>支持组合多个类名</li>
                  <li>编译时生成唯一标识符</li>
                </ul>
                <div class="generated-classes">
                  <h5>生成的类名示例：</h5>
                  <pre><code>.container → .container_3xKj9
.title → .title_2Mn8k
.content → .content_1Qw7r</code></pre>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 动态样式 -->
      <div class="demo-card">
        <h3>动态样式绑定</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>&lt;template&gt;
  &lt;div class="dynamic-demo"&gt;
    &lt;!-- CSS 变量绑定 --&gt;
    &lt;div 
      class="css-vars-box"
      :style="{
        '--primary-color': primaryColor,
        '--box-size': boxSize + 'px',
        '--border-radius': borderRadius + 'px'
      }"
    &gt;
      CSS 变量动态绑定
    &lt;/div&gt;

    &lt;!-- 条件样式 --&gt;
    &lt;div 
      :class="{
        'active': isActive,
        'large': isLarge,
        'theme-dark': isDarkTheme
      }"
      class="conditional-box"
    &gt;
      条件样式绑定
    &lt;/div&gt;

    &lt;!-- 计算样式 --&gt;
    &lt;div 
      :style="computedStyles"
      class="computed-box"
    &gt;
      计算样式绑定
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref, computed } from 'vue'

const primaryColor = ref('#007bff')
const boxSize = ref(100)
const borderRadius = ref(8)
const isActive = ref(false)
const isLarge = ref(false)
const isDarkTheme = ref(false)

const computedStyles = computed(() =&gt; ({
  transform: `scale(${isLarge.value ? 1.2 : 1})`,
  opacity: isActive.value ? 1 : 0.6,
  background: isDarkTheme.value ? '#333' : '#fff',
  color: isDarkTheme.value ? '#fff' : '#333'
}))
&lt;/script&gt;

&lt;style scoped&gt;
.css-vars-box {
  width: var(--box-size);
  height: var(--box-size);
  background: var(--primary-color);
  border-radius: var(--border-radius);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.conditional-box {
  padding: 20px;
  border: 2px solid #ddd;
  transition: all 0.3s ease;
}

.conditional-box.active {
  border-color: #007bff;
  background: #e7f3ff;
}

.conditional-box.large {
  font-size: 18px;
  padding: 30px;
}

.conditional-box.theme-dark {
  background: #333;
  color: white;
  border-color: #666;
}

.computed-box {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: all 0.3s ease;
}
&lt;/style&gt;</code></pre>
          </div>
          <div class="demo-result">
            <div class="dynamic-styles-demo">
              <div class="controls-section">
                <h4>动态样式控制</h4>
                <div class="controls-grid">
                  <div class="control-group">
                    <label>主色调:</label>
                    <input type="color" v-model="dynamicColor" />
                  </div>
                  <div class="control-group">
                    <label>尺寸:</label>
                    <input type="range" v-model="dynamicSize" min="80" max="150" />
                    <span>{{ dynamicSize }}px</span>
                  </div>
                  <div class="control-group">
                    <label>圆角:</label>
                    <input type="range" v-model="dynamicRadius" min="0" max="50" />
                    <span>{{ dynamicRadius }}px</span>
                  </div>
                  <div class="control-group">
                    <label>
                      <input type="checkbox" v-model="isActiveDemo" />
                      激活状态
                    </label>
                  </div>
                  <div class="control-group">
                    <label>
                      <input type="checkbox" v-model="isLargeDemo" />
                      大尺寸
                    </label>
                  </div>
                  <div class="control-group">
                    <label>
                      <input type="checkbox" v-model="isDarkDemo" />
                      暗色主题
                    </label>
                  </div>
                </div>
              </div>

              <div class="demo-boxes">
                <div
                  class="css-vars-demo-box"
                  :style="{
                    '--primary-color': dynamicColor,
                    '--box-size': dynamicSize + 'px',
                    '--border-radius': dynamicRadius + 'px',
                  }"
                >
                  CSS 变量
                </div>

                <div
                  :class="{
                    active: isActiveDemo,
                    large: isLargeDemo,
                    'theme-dark': isDarkDemo,
                  }"
                  class="conditional-demo-box"
                >
                  条件样式
                </div>

                <div :style="computedDemoStyles" class="computed-demo-box">计算样式</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="vue-styles-tips">
      <h3>Vue 样式最佳实践</h3>
      <div class="tips-grid">
        <div class="tip-card">
          <h4>🎯 选择合适的样式方案</h4>
          <ul>
            <li>组件内部样式使用 scoped</li>
            <li>需要样式隔离使用 CSS Modules</li>
            <li>全局样式谨慎使用 :global</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>🔍 深度选择器使用</h4>
          <ul>
            <li>优先使用 :deep() 语法</li>
            <li>避免过度使用深度选择器</li>
            <li>考虑通过 props 传递样式</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>💡 动态样式技巧</h4>
          <ul>
            <li>使用 CSS 变量实现主题切换</li>
            <li>计算属性优化复杂样式逻辑</li>
            <li>合理使用条件样式绑定</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>⚡ 性能优化</h4>
          <ul>
            <li>避免频繁的样式计算</li>
            <li>使用 CSS 过渡代替 JS 动画</li>
            <li>合理拆分样式文件</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const modulesActive = ref(false)
const dynamicColor = ref('#007bff')
const dynamicSize = ref(100)
const dynamicRadius = ref(8)
const isActiveDemo = ref(false)
const isLargeDemo = ref(false)
const isDarkDemo = ref(false)

const toggleModulesDemo = () => {
  modulesActive.value = !modulesActive.value
}

const computedDemoStyles = computed(() => ({
  transform: `scale(${isLargeDemo.value ? 1.2 : 1})`,
  opacity: isActiveDemo.value ? 1 : 0.6,
  background: isDarkDemo.value ? '#333' : '#fff',
  color: isDarkDemo.value ? '#fff' : '#333',
}))
</script>

<style scoped lang="scss">
.vue-styles-demo {
  .section-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
    border-bottom: 3px solid #4caf50;
    padding-bottom: 0.5rem;
  }

  .section-intro {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
  }

  .demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .demo-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background: #fafafa;

    h3 {
      margin: 0 0 1rem 0;
      color: #4caf50;
      font-size: 1.3rem;
    }

    .code-example {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .code-block {
      background: #2d3748;
      border-radius: 6px;
      padding: 1rem;
      overflow-x: auto;

      pre {
        margin: 0;
        color: #e2e8f0;
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        line-height: 1.4;
      }
    }

    .demo-result {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 1rem;
      min-height: 100px;
    }
  }

  .vue-styles-tips {
    .tips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }

    .tip-card {
      background: #e8f5e8;
      border-radius: 8px;
      padding: 1.5rem;
      border-left: 4px solid #4caf50;

      h4 {
        margin: 0 0 0.5rem 0;
        color: #2e7d32;
        font-size: 1.1rem;
      }

      ul {
        margin: 0;
        padding-left: 1.5rem;

        li {
          margin-bottom: 0.25rem;
          color: #666;
          font-size: 0.9rem;
        }
      }
    }
  }
}

// Scoped 样式演示
.scoped-explanation {
  .compiled-code {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 1rem;
    margin: 1rem 0;
    border-left: 4px solid #4caf50;

    pre {
      margin: 0;
      font-family: 'Fira Code', monospace;
      font-size: 0.85rem;
      color: #333;
    }
  }

  .scoped-demo-box {
    background: #e3f2fd;
    border: 2px solid #2196f3;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;

    h4 {
      margin: 0 0 0.5rem 0;
      color: #1976d2;
    }

    p {
      margin: 0;
      color: #333;
    }
  }
}

// 深度选择器演示
.deep-selector-demo {
  .parent-component {
    border: 2px solid #4caf50;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;

    h4 {
      margin: 0 0 1rem 0;
      color: #2e7d32;
    }

    .child-simulation {
      background: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 1rem;

      .child-title {
        color: #2196f3; // 模拟被深度选择器影响
        margin: 0 0 0.5rem 0;
      }

      .child-content {
        font-size: 16px; // 模拟被深度选择器影响
        margin: 0 0 0.5rem 0;
        color: #666;
      }

      .nested-child {
        background: #e8f5e8;
        padding: 0.5rem;
        border-radius: 4px;

        .nested-text {
          color: #4caf50;
          font-size: 0.9rem;
        }
      }
    }
  }

  .deep-explanation {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 1rem;
    border-left: 4px solid #2196f3;

    h4 {
      margin: 0 0 0.5rem 0;
      color: #1976d2;
    }

    pre {
      margin: 0;
      font-family: 'Fira Code', monospace;
      font-size: 0.85rem;
      color: #333;
    }
  }
}

// 插槽选择器演示
.slotted-demo {
  .slot-wrapper {
    border: 2px solid #ff9800;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;

    h4 {
      margin: 0 0 1rem 0;
      color: #f57c00;
    }

    .slot-content-area {
      background: #fff3e0;
      border: 1px solid #ffcc02;
      border-radius: 4px;
      padding: 1rem;

      .slot-title {
        margin: 0 0 0.5rem 0;
        color: #e65100; // 模拟被 :slotted 影响
      }

      .slot-content {
        color: #2196f3; // 模拟被 :slotted 影响
        font-weight: bold;
        margin: 0 0 0.5rem 0;
      }

      .slot-highlight {
        background: yellow;
        padding: 4px 8px;
        border-radius: 2px;
      }
    }
  }

  .slotted-explanation {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 1rem;
    border-left: 4px solid #ff9800;

    h4 {
      margin: 0 0 0.5rem 0;
      color: #f57c00;
    }

    pre {
      margin: 0;
      font-family: 'Fira Code', monospace;
      font-size: 0.85rem;
      color: #333;
    }
  }
}

// 全局选择器演示
.global-demo {
  .local-wrapper {
    border: 2px solid #9c27b0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;

    .local-class {
      color: blue;
      margin-bottom: 0.5rem;
    }

    .global-content {
      padding: 10px;
      background: #f0f0f0;
      border-radius: 4px;
      margin-bottom: 0.5rem;
    }
  }

  .global-explanation {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 1rem;
    border-left: 4px solid #9c27b0;

    h4 {
      margin: 0 0 0.5rem 0;
      color: #7b1fa2;
    }

    pre {
      margin: 0 0 0.5rem 0;
      font-family: 'Fira Code', monospace;
      font-size: 0.85rem;
      color: #333;
    }

    .note {
      margin: 0;
      color: #d32f2f;
      font-size: 0.9rem;
    }
  }
}

// 动态样式演示
.dynamic-styles-demo {
  .controls-section {
    margin-bottom: 2rem;

    h4 {
      margin: 0 0 1rem 0;
      color: #333;
    }

    .controls-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;

      .control-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        label {
          font-weight: 500;
          font-size: 0.9rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }

        input[type='color'] {
          width: 50px;
          height: 30px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }

        input[type='range'] {
          flex: 1;
        }

        input[type='checkbox'] {
          margin: 0;
        }

        span {
          font-size: 0.8rem;
          color: #666;
        }
      }
    }
  }

  .demo-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;

    .css-vars-demo-box {
      width: var(--box-size);
      height: var(--box-size);
      background: var(--primary-color);
      border-radius: var(--border-radius);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      font-size: 0.9rem;
      text-align: center;
      margin: 0 auto;
    }

    .conditional-demo-box {
      padding: 20px;
      border: 2px solid #ddd;
      border-radius: 4px;
      transition: all 0.3s ease;
      text-align: center;
      font-size: 0.9rem;

      &.active {
        border-color: #007bff;
        background: #e7f3ff;
      }

      &.large {
        font-size: 1.1rem;
        padding: 30px;
      }

      &.theme-dark {
        background: #333;
        color: white;
        border-color: #666;
      }
    }

    .computed-demo-box {
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 4px;
      transition: all 0.3s ease;
      text-align: center;
      font-size: 0.9rem;
    }
  }
}
</style>

<!-- CSS Modules 样式 -->
<style module>
.container {
  padding: 20px;
  border-radius: 8px;
  border: 2px solid #673ab7;
  background: #f3e5f5;
  transition: all 0.3s ease;
}

.title {
  font-size: 18px;
  margin-bottom: 12px;
  color: #4a148c;
}

.content {
  line-height: 1.6;
  margin-bottom: 12px;
  color: #333;
}

.highlight {
  background: #ffeb3b;
  padding: 4px 8px;
  border-radius: 2px;
}

.button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #673ab7;
  color: white;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.button:hover {
  background: #4a148c;
}
</style>

<!-- 全局样式演示 -->
<style>
.global-class {
  color: red;
  font-weight: bold;
}
</style>
